<template>
	<view class="comment">
		<view class="comment-item" v-for="(item,key) in commentList" :key="key">
			<ListItem type="comment" :content="item" :propPage="page" :indexKey="key" :propPageSize="pageSize" />
		</view>
		<view class="nolist ac" v-if="nodata">没有更多了...</view>
		<Tips v-if="commentList.length==0 && isInit" topTips="您还没有评论" bottomTips="赶紧去拍摄精彩视频吧!" />
	</view>
</template>

<script>
	import ListItem from './components/ListItem.vue'
	import Tips from './components/Tips'
	import { apiCommentList } from '@/api/message'
	export default {
		components: {
			ListItem,
			Tips
		},
		data() {
			return {
				isInit: false,
				nodata: false,
				commentList: [],
				tempList: [],
				multipleList: [],
				page: 1,
				pageSize: 30
			}
		},
		onShow() {
			this.getComment(true)
		},
		onReachBottom() {
			if ( this.tempList.length < 30 ) {
				this.nodata = true
				return
			}
			this.page++
			this.getComment()
		},
		methods: {
			getComment(reset) {
				uni.showLoading()
				apiCommentList({ page: this.page, page_size: this.pageSize }).then( res => {
					this.isInit = true
					this.tempList = res.data.data
					// 判断数据是否重新渲染 否-将新数据追加至旧数组后
					let dataList = []
					if (reset) {
						dataList = res.data.data
						this.multipleList = []
					} else {
						dataList = this.tempList.concat(res.data.data)
					}
					dataList.forEach( item => {
						this.multipleList[item.id] = item
					})
					this.commentList = []
					// 按时间倒序
					let getSortData = this.multipleList.sort(function(a, b) {
						return new Date(b.created_at.replace(/-/g,'/')) - new Date(a.created_at.replace(/-/g,'/'))
					})
					getSortData.forEach( item => {
						this.commentList.push(item)
					})
					uni.hideLoading()
				}).catch( err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment {
		padding-top: 40upx;
		.comment-item {
			margin-bottom: 60upx;
		}
		.nolist {
			height: 100upx;
			line-height: 100upx;
			margin-bottom: 20upx;
			width: 100%;
		}
	}
</style>
